<template>
	<view class="listItem" @click="toFoodDetails">
		<view class="item-img">
			<template v-if="food.thumb_image_url">
				<image :src="food.thumb_image_url" />
			</template>
			<template v-else>
				<image src="../../static/mis_default_error.png" />
			</template>
		</view>
		<view class="item-content">
			<view class="name">
				<text>{{ food.name }}</text>
			</view>
			<view class="calory">
				<li v-if="Nutrition.index <= 2 && food.calory">
					<text>{{ parseInt(food.calory) }}</text>
					千卡/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 3 && food.protein">
					<text>{{ food.protein }}</text>
					克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 4 && food.fat">
					<text>{{ food.fat }}</text>
					克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 5 && food.fiber_dietary">
					<text>{{ food.fiber_dietary }}</text>
					克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 6 && food.carbohydrate">
					<text>{{ food.carbohydrate }}</text>
					克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 7 && food.vitamin_a">
					<text>{{ food.vitamin_a }}</text>
					IU/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 8 && food.thiamine">
					<text>{{ food.thiamine }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 9 && food.lactoflavin">
					<text>{{ food.lactoflavin }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 10 && food.vitamin_c">
					<text>{{ food.vitamin_c }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 11 && food.vitamin_e">
					<text>{{ food.vitamin_e }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 12 && food.niacin">
					<text>{{ food.niacin }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 13 && food.natrium">
					<text>{{ food.natrium }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 14 && food.calcium">
					<text>{{ food.calcium }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.iron == 15 && food.vitamin_e">
					<text>{{ food.vitamin_e }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.kalium == 16 && food.vitamin_e">
					<text>{{ food.vitamin_e }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 17 && food.iodine">
					<text>{{ food.iodine }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 18 && food.zinc">
					<text>{{ food.zinc }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 19 && food.selenium">
					<text>{{ food.selenium }}</text>
					微克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.magnesium == 20 && food.magnesium">
					<text>{{ food.magnesium }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 21 && food.copper">
					<text>{{ food.copper }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 22 && food.manganese">
					<text>{{ food.manganese }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 23 && food.cholesterol">
					<text>{{ food.cholesterol }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 24 && food.folacin">
					<text>{{ food.folacin }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 25 && food.saturated_fat">
					<text>{{ food.saturated_fat }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 26 && food.sugar">
					<text>{{ food.sugar }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 28 && food.gi">
					<text>{{ food.gi }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 29 && food.gl">
					<text>{{ food.gl }}</text>
					毫克/{{ food.weight }}克
				</li>

				<li v-if="Nutrition.index == 30 && food.phosphor">
					<text>{{ food.phosphor }}</text>
					毫克/{{ food.weight }}克
				</li>
			</view>
		</view>
		<view class="item-icon" v-if="!ComparisonState">
			<image v-if="food.health_light == 1" src="../../static/ic_food_light_green.png" />
			<image v-if="food.health_light == 2" src="../../static/ic_food_light_yellow.png" />
			<image v-if="food.health_light == 3" src="../../static/ic_food_light_red.png" />
		</view>
		<view v-else class="comparisonBtn" @click.stop="toComparison">
			<text>+ 加入对比</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		props: ["food", "Nutrition"],
		computed: {
			...mapState(["ComparisonState"]),
		},
		name: "DetailsListItem",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations(["toggleComparisonArr", "toggleComparisonState"]),

			toComparison: function() {

				uni.request({
					url: `https://food.boohee.com/fb/v1/foods/${this.food.code}/brief`,
					success: (res) => {
						this.toggleComparisonArr(res.data);
						uni.navigateTo({
							url: `../../subpkg/FoodComparison/FoodComparison`
						})
						this.toggleComparisonState(false);
					}
				})
			},

			toFoodDetails: function() {
				uni.navigateTo({
					url: `../../subpkg/FoodDetails/FoodDetails?code=` + this.food.code
				})
			},
		},
	}
</script>

<style lang="scss">
	.listItem {
		height: 65px;
		border-top: 1px solid #e1e1e1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 20px;

		&:nth-of-type(1) {
			border-top: none;
		}

		.item-img {
			image {
				border-radius: 50%;
				width: 50px;
				height: 50px;
			}
		}

		.item-content {
			display: flex;
			flex: 1;
			text-align: left;
			flex-direction: column;
			padding-left: 15px;

			.name {
				font-size: 15px;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.calory {
				list-style: none;
				font-size: 13px;
				margin-top: 5px;

				text {
					color: #fe6a6f;
				}
			}
		}

		.item-icon {
			image {
				width: 15px;
				height: 15px;
			}
		}

		.comparisonBtn {
			background: white;
			border: 1px solid #ff6b70;
			padding: 7px;
			color: #ff6b70;
		}
	}
</style>
